<template>
  <el-card v-loading="loading" class="automatic-associations">
    <template v-if="userList.length">
      <header class="automatic-associations__header">
        找到{{ userList.length }}个患者
      </header>
      <user-item
        v-for="user in userList"
        :key="user.id"
        :avatar="user.imageUrl"
        :name="user.name"
        :sex="user.sex"
        :age="user.age"
        :phone-number="`${user.phoneNumber} ${user.phoneNumber2}`"
        :patient="user"
      ></user-item>
    </template>
    <empty v-else content="没有找到患者" height="200"></empty>
  </el-card>
</template>

<script>
import { userMatcherRequest } from '@/api/services/common'
import { debounce } from '@/utils/utils'

import UserItem from './UserItem'

export default {
  name: 'AutomaticAssociations',
  components: {
    UserItem,
    Empty: () => import('@/components/yiya/Empty'),
  },
  props: {
    keyword: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      loading: false,
      userList: [],
    }
  },
  watch: {
    keyword(val, old) {
      if (val !== old) {
        this.userMatcherRequest()
      }
    },
  },
  mounted() {
    this.userMatcherRequest()
    this.userMatcherRequest = debounce(this.userMatcherRequest)
  },
  methods: {
    async userMatcherRequest() {
      try {
        this.loading = true
        const { list } = await userMatcherRequest({
          keyword: this.keyword,
        })
        this.userList = list.filter((i) => i.isTemporary === 1)
      } finally {
        this.loading = false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.automatic-associations {
  width: 350px;
  position: absolute;
  top: 110%;
  left: 0;
  height: 400px;
  z-index: 30000;
  background-color: #ffffff;
  overflow-y: scroll;

  &__header {
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
  }
}
</style>
